
import { BarsOutlined } from '@ant-design/icons'
import DrawerPopup from './drawer';
import Login from './login';
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next';
import i18n from '../i18n'
import classnames from 'classnames'
import logo from '../assets/images/logo.png'
import { Button, ConfigProvider, Flex, Popconfirm } from 'antd';

const Header = () => {
  const [show, setShow] = useState(false);
  const [showLogin, setShowLogin] = useState(false);
  const [language, setLanguage] = useState(localStorage.getItem('language') || 'zh');
  const { t } = useTranslation()

  const changeLanguage = (e) => {
    localStorage.setItem('language', e)

    setLanguage(e)
    i18n.changeLanguage(e)
  }

  const onShowDrawer = (e) => {
    setShow(e)
  }
  const onCloseLogin = (e) => {
    setShowLogin(e)
  }
  const [userInfo, setUserInfo] = useState(JSON.parse(localStorage.getItem('userInfo') || '{}'))

  const logout = () => {
    localStorage.removeItem('userInfo')
    localStorage.removeItem('token')
    window.location.reload()
  }
  // useEffect(()=>{
  //   setUserInfo(JSON.parse(localStorage.getItem('userInfo') || '{}'))
  // },[userInfo])
  return (
    <>
      <div>
        <div className='flex flex-col items-center justify-center'>
          <div className='w-[300px] sm:w-[412px] h-[130px] sm:h-[200px] flex flex-col items-center'>
            <img className='h-full' src={logo} alt="" />
            <BarsOutlined onClick={() => onShowDrawer(true)} className='text-[#fff] cursor-pointer text-3xl mt-5' />
          </div>
        </div>
        <div className='flex items-center absolute sm:right-10 right-5 sm:top-10 top-2 text-white'>
          <div className={classnames('text-sm mr-4 cursor-pointer hover:text-orange-400', language === 'zh' && 'text-orange-400')} onClick={() => changeLanguage('zh')}>{t('中文')}</div>
          <div className={classnames('text-sm mr-4 cursor-pointer hover:text-orange-400', language === 'en' && 'text-orange-400')} onClick={() => changeLanguage('en')}>English</div>
          <div className={classnames('text-sm mr-8 cursor-pointer hover:text-orange-400', language === 'th_TH' && 'text-orange-400')} onClick={() => changeLanguage('th_TH')}>ภาษาไทย</div>
          {Object.keys(userInfo).length > 0 ?
            <div className='flex'>
              {t('欢迎您！')}{userInfo.nickName}
              <Popconfirm
                placement="bottom"
                title={t('是否退出登录？')}
                onConfirm={logout}
                okText={t('确定')}
                cancelText={t('取消')}
              >
                <div className='ml-5 cursor-pointer hover:text-orange-400 '>{t('退出')}</div>
              </Popconfirm>
            </div>
            : <div className='cursor-pointer hover:text-orange-400' onClick={() => setShowLogin(true)}>{t('登录')}</div>
          }
        </div>
      </div>
      <DrawerPopup show={show} onEvent={onShowDrawer} />
      <Login show={showLogin} onEvent={onCloseLogin} />
    </>
  )
}

export default Header